<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="邀请好友" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box bg-img">
			<view class="content-item">
				<view
					class="bg-content bg-img flex flex-direction justify-center align-center"
					style="background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bg_yqhy_white.png);background-size: 100%;"
				>
					<u-avatar
						src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/custserv_avatar.png"
						mode="circle"
						size="120"
					></u-avatar>
					<view class="f30 margin-top-sm text-center">玛卡巴卡</view>
					<view class="f44 margin-top text-center" style="color: #847FFF;">PT25689</view>
					<view class="code-box">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png" class="img"></image>
					</view>
					<view class="f24 text-conter margin-top" style="color: #999999;">
						红利期仅限100名幸运儿可以获得消费金额免单
					</view>
					<view class="ico-cont flex justify-between">
						<view class="ico-item">
							<image
								src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_wxyqhy.png"
								class="ico-img"
							></image>
							<view class="text-center margin-top-sm">微信好友</view>
						</view>
						<view class="ico-item" @click="sharePoster">
							<image
								src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_bctp.png"
								class="ico-img"
							></image>
							<view class="text-center margin-top-sm">保存图片</view>
						</view>
						<view class="ico-item">
							<image
								src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_fzlj.png"
								class="ico-img"
							></image>
							<view class="text-center margin-top-sm">复制链接</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<qrcode-poster ref="poster" :title="goods.title" 
		        :subTitle="goods.sub_title" 
		        :headerImg="goods.image[0]"
		        :price="goods.price"></qrcode-poster>
		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import QrcodePoster from '../../components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';
export default {
	components: {
		QrcodePoster
	},
	data() {
		return {
			is_show_model: false, //是否显示分享模态窗
			goods:{
				image:['https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bg_yqhy.png'],
				title: '玛卡巴卡',
				sub_title: 'PT6526',				
				tipc: '红利期仅限100名幸运儿可以获得消费金额免单',
			}
		};
	},
	onShow() {},
	onLoad(e) {
	},
	methods: {
		//分享海报
		sharePoster() {
			//获取带参数二维码并传递
			this.is_show_model = false;
			this.$refs.poster.showCanvas('https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/images.png');
		}
	}
};
</script>

<style lang="scss" scoped>
.page_box {
	width: 100vw;
	height: 100vh;
}

.content_box {
	background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bg_yqhy.png);
	.bg-content {
		padding: 40rpx;
		position: relative;
		top: 330rpx;
		.code-box {
			width: 260rpx;
			height: 260rpx;
			margin: 32rpx 0 26rpx;
			.img {
				width: 100%;
				height: 100%;
			}
		}
		.ico-cont {
			width: 100%;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			.ico-item {
				display: flex;
				flex-direction: column;
				justify-items: center;
				align-items: center;
				.ico-img {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
}
</style>
